<template>
    <div :class="`tech-swipe-image ${mode}`">
        <Swipe class="tech-swipe" :autoplay="2000" :duration="500" :show-indicators="showIndicators">
            <SwipeItem  v-for="(item, i) in images" :key="i">
                <img v-if="type === 'show'" class="swipe-image-item" :src="item" :alt="item || ''" />
                <img v-if="type === 'redirect'" class="swipe-image-item" :src="item.image" :alt="item.title || ''" @click="redirect(item)" />
                <img v-if="type === 'click'" class="swipe-image-item" :src="item.image" :alt="item.title || ''" @click="click(item)" />
            </SwipeItem>
        </Swipe>
    </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import ModeMixin from '@common/mixin';
export default {
    name: 'SwipeImage',
    mixins: [ModeMixin],
    components: {
        Swipe,
        SwipeItem,
    },
    props: {
        images: Array,
        showIndicators: {
            type: Boolean,
            default: true,
        },
        type: {
            type: String,
            default: 'show', // redirect, click, show
        },
    },
    computed: {
    },
    methods: {
        redirect(res) {
            const { url } = res;
            url && this.$router.push(url);
        },
        click(res) {
            this.$emit('click', res);
        },
    },
};
</script>

<style lang="less">
.tech-swipe-image{
    background-color: @white;
    .p-h(@gap-md);
    .mode-white();
    .tech-swipe {
        border-radius: @border-radius;
        height: 160px;
        .swipe-image-item {
            background-color: @white;
            width: 100%;
            height: 100%;;
        }
    }
}
</style>

